<template>
<!-- 社区管理 -->
  <div class="mainbox">
    <div class="query">
      <!-- 三级联动选择 -->
        <div class="inputbox">
            <!-- 社区及省市区三级联动 -->
            <el-select v-model="value" filterable placeholder="请选择" class="serachinput">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <!-- 省 -->
            <el-select v-model="selectedProvince" placeholder="省" class="choice" @change="handleProvinceChange">
                <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                <span style="float: left" class="city">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
            <!-- 市 -->
            <el-select v-model="selectedCity" placeholder="市" class="choice" @change="handleCityChange">
                <el-option
                v-for="item in filteredCities"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                <span style="float: left" class="city">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
            <!-- 区 -->
            <el-select v-model="selectedDistrict" placeholder="县(区)" class="choice">
                <el-option
                v-for="item in filteredDistricts"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                <span style="float: left" class="city">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
            <!-- 搜索输入 -->
            
        </div>
        <div class="chaxunbox">
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
    </div>
    <!-- 数据表格 -->
    <div class="datalists">
        <div class="datalistsname">数据列表</div>
        <!-- 添加按钮 -->
        <!-- <el-button type="primary" class="append" @click="append"><i class="el-icon-plus"></i>添加工单</el-button> -->
        <!-- 数据表格 -->
        <div class="datatable">
            <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
                <el-table-column
                type="index"
                label="序号"
                width="67">
                </el-table-column>
                <el-table-column
                prop="Belongingcommunity"
                label="所属小区"
                width="146">
                </el-table-column>
                <el-table-column
                prop="Authorizedcommunity"
                label="授权小区"
                width="146">
                </el-table-column>
                <el-table-column
                prop="Authorizedperson"
                label="授权人"
                width="146">
                </el-table-column>
                <el-table-column
                prop="effectivetime"
                label="有效时间"
                width="146">
                </el-table-column>
                <el-table-column
                prop="Authorizedlocation"
                label="授权位置"
                width="146">
                </el-table-column>
                <el-table-column
                prop="Numberofdooropenings"
                label="开门次数"
                width="146">
                </el-table-column>
                <el-table-column
                prop="operate"
                label="操作"
                width="274">
                <template slot-scope="scope">
                    <i class="el-icon-office-building"></i>
                    <span style="margin-left: 5px;margin-right:5px" @click="manage">{{ scope.row.view}}</span>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage2"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="50"
                layout=" prev, pager, next, sizes,jumper"
                :total="totalpage">
                </el-pagination>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        input: "",//社区输入框数据
        // tableData: [
        //         {
        //             date: '1',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门|西入口闸机',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },  
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },  
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },

        //         {
        //             date: '2',
        //             Belongingcommunity: '万象城',
        //             Authorizedcommunity:'1号楼1单元2032',
        //             Authorizedperson:'赵小刚',
        //             effectivetime:'2小时',
        //             Authorizedlocation:'1号楼1单元门',
        //             Numberofdooropenings:'12',
        //             view:' 开门记录'
        //         },
        //     ],//数据表格数据
        dialogshow:0,   //社区名称的显示与隐藏
        dialogbol:true, //社区名称对话框开关
        cities: [
            {
                value: 'Beijing',
                label: '北京',
                prefecturelevelcity:[
                    {
                        label:'北京市',
                        value:'Beijing',
                        districts:[
                            {
                                label:'东城区',
                                value:'Dongcheng'
                            },
                            {
                                label:'西城区',
                                value:'Xicheng'
                            },
                            {
                                label:'朝阳区',
                                value:'Chaoyang'
                            },
                            {
                                label:'丰台区',
                                value:'Fengtai'
                            },
                            {
                                label:'石景山区',
                                value:'Shijingshan'
                            },
                            {
                                label:'海淀区',
                                value:'Haidian'
                            },
                            {
                                label:'通州区',
                                value:'Tongzhou'
                            },
                            {
                                label:'房山区',
                                value:'Fangshan'
                            },
                        ]
                    },
                ]
            }, 
            {
                value: 'HeNan',
                label: '河南',
                prefecturelevelcity:[
                    {
                        label:'郑州市',
                        value:'Zhengzhou', 
                        districts:[
                            {
                                label:'金水区',
                                value:'Jinshui'
                            },
                            {
                                label:'二七区',
                                value:'Erqi'
                            },
                            {
                                label:'高新区',
                                value:'Gaoxin'
                            },
                            {
                                label:'惠济区',
                                value:'Huiji'
                            },
                            {
                                label:'管城回族区',
                                value:'Guancheng'
                            },
                            {
                                label:'经开区',
                                value:'Jingkai'
                            },
                            {
                                label:'郑东新区',
                                value:'Zhengdong'
                            },
                        ]
                    },
                    {
                        label:'开封市',
                        value:'Kaifeng', 
                        districts:[
                            {
                                label:'龙亭区',
                                value:'Longting'
                            },
                            {
                                label:'顺和回族区',
                                value:'Shunhe'
                            },
                            {
                                label:'鼓楼区',
                                value:'Gulou'
                            },
                            {
                                label:'禹王台区',
                                value:'Yuwangtai'
                            },
                            {
                                label:'祥符区',
                                value:'Xiangfu'
                            },
                            {
                                label:'杞县',
                                value:'Qixian'
                            },
                            {
                                label:'通许县',
                                value:'Tongxu'
                            },
                        ]
                    },
                    {
                        label:'鹤壁市',
                        value:'Hebi', 
                        districts:[
                            {
                                label:'淇滨区',
                                value:'Qibin'
                            },
                            {
                                label:'山城区',
                                value:'Shancheng'
                            },
                            {
                                label:'鹤山区',
                                value:'Gulou'
                            },
                            {
                                label:'淇县',
                                value:'QiXian'
                            },
                            {
                                label:'浚县',
                                value:'Xunxian'
                            },
                        ]
                    },
                    {
                        label:'新乡市',
                        value:'Xinxiang', 
                        districts:[
                            {
                                label:'红旗区',
                                value:'Hongqi'
                            },
                            {
                                label:'卫滨区',
                                value:'Weibin'
                            },
                            {
                                label:'牧野区',
                                value:'Muye'
                            },
                            {
                                label:'凤泉区',
                                value:'Fengquan'
                            },
                            {
                                label:'辉县',
                                value:'Huixian'
                            },
                        ]
                    },
                    {
                        label:'焦作市',
                        value:'Jiaozuo', 
                        districts:[
                            {
                                label:'解放区',
                                value:'Jiefang'
                            },
                            {
                                label:'中站区',
                                value:'Zhognzhan'
                            },
                            {
                                label:'马村区',
                                value:'Machun'
                            },
                            {
                                label:'山阳区',
                                value:'Shanyang'
                            },
                            {
                                label:'修武县',
                                value:'Xiuwu'
                            },
                        ]
                    }
                ]
            },
            {
                value: 'Shanghai',
                label: '上海',
                prefecturelevelcity:[
                    {
                        label:'上海市',
                        value:'Shanghai',
                        districts:[
                            {
                                label:'黄浦区',
                                value:'Huangpu'
                            },
                            {
                                label:'徐汇区',
                                value:'Xuhui'
                            },
                            {
                                label:'长宁区',
                                value:'Changning'
                            },
                            {
                                label:'静安区',
                                value:'Jingan'
                            },
                            {
                                label:'普陀区',
                                value:'Putuo'
                            },
                            {
                                label:'虹口区',
                                value:'Hongkou'
                            },
                            {
                                label:'杨浦区',
                                value:'Yangpu'
                            },
                            {
                                label:'闵行区',
                                value:'Minhang'
                            },
                        ]
                    },
                ]
            }, 
            {
                value: 'TianJin',
                label: '天津',
                prefecturelevelcity:[
                    {
                        label:'天津市',
                        value:'Tianjin',
                        districts:[
                            {
                                label:'和平区',
                                value:'Heping'
                            },
                            {
                                label:'河东区',
                                value:'Hedong'
                            },
                            {
                                label:'河西区',
                                value:'Hexi'
                            },
                            {
                                label:'南开区',
                                value:'Nankai'
                            },
                            {
                                label:'红桥区',
                                value:'Hongqiao'
                            },
                            {
                                label:'东丽区',
                                value:'Dongli'
                            },
                            {
                                label:'西青区',
                                value:'Xiqing'
                            },
                            {
                                label:'津南区',
                                value:'Jinnan'
                            },
                        ]
                    },
                ]
            }, 
            {
                value: 'GuangDong',
                label: '广东',
                prefecturelevelcity:[
                    {
                        label:'广州市',
                        value:'Guangzhou',
                        districts:[
                            {
                                label:'越秀区',
                                value:'Yuexiu'
                            },
                            {
                                label:'荔湾区',
                                value:'Liwan'
                            },
                            {
                                label:'海珠区',
                                value:'Haizhu'
                            },
                            {
                                label:'天河区',
                                value:'Tianhe'
                            },
                            {
                                label:'白云区',
                                value:'Baiyun'
                            },
                        ]
                    },
                    {
                        label:'深圳市',
                        value:'Shenzhen',
                        districts:[
                            {
                                label:'福田区',
                                value:'Futian'
                            },
                            {
                                label:'罗湖区',
                                value:'Luohu'
                            },
                            {
                                label:'南山区',
                                value:'Nanshan'
                            },
                            {
                                label:'宝安区',
                                value:'Baoan'
                            },
                            {
                                label:'龙岗区',
                                value:'Longgang'
                            },
                        ]
                    },
                    {
                        label:'珠海市',
                        value:'Zhuhai',
                        districts:[
                            {
                                label:'香洲区',
                                value:'Xiangzhou'
                            },
                            {
                                label:'金湾区',
                                value:'Jinwan'
                            },
                            {
                                label:'斗门区',
                                value:'Doumen'
                            },
                        ]
                    },
                    {
                        label:'汕头市',
                        value:'Shantou',
                        districts:[
                            {
                                label:'龙湖区',
                                value:'Longhu'
                            },
                            {
                                label:'金平区',
                                value:'Jinping'
                            },
                            {
                                label:'南山区',
                                value:'Nanshan'
                            },
                            {
                                label:'濠江区',
                                value:'Haojiang'
                            },
                            {
                                label:'澄海区',
                                value:'Chenghai'
                            },
                        ]
                    },
                    {
                        label:'韶关市',
                        value:'Shaoguan',
                        districts:[
                            {
                                label:'浈江区',
                                value:'Zhenjiang'
                            },
                            {
                                label:'武江区',
                                value:'Wujiang'
                            },
                            {
                                label:'曲江区',
                                value:'Qujaing'
                            },
                            {
                                label:'乐昌市',
                                value:'Lechang'
                            },
                            {
                                label:'南雄市',
                                value:'Nanxiong'
                            },
                        ]
                    },
                ]
            }, 
        ],//三级联动数据
            selectedProvince: '',   //省
            selectedCity: '',       //市
            selectedDistrict: '',   //县(区)
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],
            value2: [],
            value: '',
            tableData:[],
            datalists:[],
            currentPage2: 1,//分页器数据
            pagelimit:10,   //每页显示
            totalpage:300,  //总页数
        };
        
  },
    //三级联动筛选   
  computed: {
    // 选中省筛选市
    filteredCities() {
      return this.cities.find(p => p.label === this.selectedProvince)?.prefecturelevelcity || [];
    },
    // 选中市筛选县（区）
    filteredDistricts() {
      return this.filteredCities.find(c => c.label === this.selectedCity)?.districts || [];
    }
  },
  watch:{
    currentPage2:{
        handler(val,oldval){
            console.log((val-1)*this.pagelimit,val*this.pagelimit)
            this.tableData=this.datalists.slice((val-1)*this.pagelimit,val*this.pagelimit)
        },
    },
    pagelimit:{
        handler(val,oldval){
            console.log(val,oldval)
            this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
        }
    },
},
  mounted(){
    this.$axios.get('http://127.0.0.1/visitorlists',{
        headers: {
                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            },
    }).then(res=>{
        console.log(res.data)
        this.datalists=res.data
        this.totalpage=res.data.length
        this.tableData=res.data.slice(0,10)
    }).catch(err=>{
        console.log(err)
    })
  },
  methods:{
    // 三次联动点击事件
    handleProvinceChange() {
      this.selectedCity = '';
      this.selectedDistrict = '';
    },
     handleCityChange() {
      this.selectedDistrict = '';
    },
    // 分页数据
    getpaheDat(currpage,pagelimit){
        fetch(`http://127.0.0.1/communitypage?currentpage=${currpage-1}&pagelimit=${pagelimit}`).then(res=>res.json()).then(res1=>{
            console.log(res1)
            this.tableData=res1
        }).catch(err=>{
            console.log(err)
        })
    },
    // 分页器打印
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagelimit=val  //每页显示
        this.currentPage2=1 //当前页
        // this.getpaheDat(this.currentPage2,val)
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage2=val
        // this.getpaheDat(val,this.pagelimit)
    },
    // 社区名称对话框的打开与关闭
    open(){
        if(this.dialogbol){
            this.dialogshow=1
            console.log("打开社区服务对话框")
        }else{
            this.dialogshow=0
            console.log("关闭社区服务对话框")
        }
        this.dialogbol=!this.dialogbol
    },
    close(){
        console.log("关闭社区服务对话框")
        this.dialogshow=0
        this.dialogbol=true
    },
    // 数据表格中编辑、删除和管理
    edit(i){
        console.log("编辑",i)
        fetch(`http://127.0.0.1/communityedit?data=${i}`).then(res=>res.json()).then(res1=>{
            console.log(res1)
            this.$router.push({
                path:'/about/AddCommunity',
                query:{
                    res1
                }
            })
        }).catch(err=>{
            console.log(err)
        })
        
    },
    delate(){
        console.log("删除")
    },
    manage(){
        console.log("楼宇管理")
        this.$router.push('/about/doorcords')
    },
    // 添加数据表格数据   跳转添加页面
    append(){
        console.log("添加")
    },
    // 三级联动查询和重置按钮
    select(){
        // 如果社区名称输入为空或者省市区三级联动输入内容都为空，弹出弹框提示输入内容不能为空
        if(this.input=='' || (this.selectedProvince=='' && this.selectedCity=='' && this.selectedDistrict=='')){
            this.$alert('社区名称或省、市、县(区)不能为空，请重新输入', '标题名称', {
                confirmButtonText: '确定',
            });
        }else{
            console.log("查询",this.input,'社区',this.selectedProvince+'省'+this.selectedCity+"市"+this.selectedDistrict+"县(区)")
            this.tableData=[]
            fetch(`http://127.0.0.1/communityselect?name=${this.input}`).then(res=>res.json()).then(res1=>{
                // console.log(res1)
                this.tableData=res1
            }).catch(err=>{
                console.log(err)
            })
        }
    },
    reasert(){
        console.log("重置")
    },
  },
}
</script>

<style lang="scss" scoped>
    //查询盒子 
    .query{
        width: 1260px;
        height: 162px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        border:  1px solid rgba(233, 233, 233, 1);
        padding: 0 20px;
        position: relative;
        .inputbox{
            width: 1000px;
            height: 120px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .chaxunbox{
            display: flex;
            justify-content: center;
        }
        .nomargin{
            margin-left: 0 !important;
        }
        .el-input{
            width: 180px;
            height: 35px !important;
            margin-left: 10px;
            ::v-deep .el-input__inner{
                height: 35px !important;
                border-color: #C0C4CC !important;
            }
        }
        // 三级联动选择器
        .choice{
            width: 180px;
            margin-left: 10px;
            .city{
                color: #999 !important;
                font-weight: 700;
            }
        }
        ::v-deep .choice .el-input__inner{
            height: 35px;
        }
        ::v-deep .choice .el-icon-arrow-up{
            line-height: 35px;
        }
        ::v-deep .el-select .el-input__inner:focus {
             border-color: #C0C4CC !important; 
        }
        // 查询按钮
        .chaxun{
            width: 80px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #0079fe !important;
            .el-icon-search{
                font-size: 16px;
                margin-right: 5px;
            }
        }
        .chaxun:hover{
            background-color: #66b1ff !important;
            color: #fff !important;
        }
        // 重置按钮
        .reaseat{
            width: 80px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff !important;
            .el-icon-refresh-right{
                font-size: 16px;
                margin-right: 5px;
            }
        }
        .reaseat:hover{
            border-color: #0079fe !important;
            color: #0079fe !important;
        }
        // 社区选择框
        .communityselect{
            width: 405px;
            height: 35px;
            text-align: left;
            ::v-deep .el-input__inner{
                height: 35px !important;
            }
        }
        // 搜索输入框
        .serachinput{
            width: 180px;
            ::v-deep .el-input__inner{
                height: 35px !important;
            }
        }
    }
    // 数据列表
    .datalists{
        width: 1260px;
        height: 170%;
        padding: 0 20px;
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        position: relative;
        box-sizing: border-box;
        // 数据列表名字名称
        .datalistsname{
            margin-top: 40px;
            width: 57px;
            height: 18px;
            line-height: 18px;
            color: #666666;
            font-size: 14px;
        }
        // 添加数据按钮
        .append{
            width: 100px;
            height: 35px;
            position: absolute;
            right: 20px;
            top: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0079fe !important;
            .el-icon-plus{
                font-size: 16px;
                margin-right: 5px;
                font-weight: 700;
            }
        }
        .append:hover{
            background-color: #66b1ff !important;
            color: #fff !important;
        }
        // 数据表格
        .datatable{
            margin-top: 20px;
            ::v-deep .has-gutter th{
                height: 45px !important;
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding: 0 !important;
                font-size: 14px;
                color: #666666;
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
            }
            ::v-deep .el-table__row td{
                height: 50px !important;
                padding: 0 !important;
            }
            ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                background-color: #f9f9f9;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(1){
                text-align: center !important;
                color: #999 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(2){
                color: #666 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(4){
                color: #999 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                text-align: center;
                color: #0079fe;
                // cursor: pointer;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                cursor: pointer;
                text-decoration: underline !important;
                // color: #4a4a4a;
            }
            ::v-deep .el-table__row .el-table__cell{
                color: #666666;
                font-size: 12px;
            }
            ::v-deep .el-table__row:hover{
                background-color: inherit !important;
            }
            // 分页
            .block{
                display: flex;
                justify-content: end;
                ::v-deep .el-pagination__sizes{
                    margin-left: 10px;
                    width: 80px;
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .btn-prev,::v-deep .el-pager li,::v-deep .btn-next{
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    background-color: #fff;
                    border: 1px solid rgba(228, 228, 228, 1);
                }
                ::v-deep .el-pager .active{
                    background-color: #0079fe !important;
                }
                ::v-deep .el-pager .active:hover{
                    color: #fff !important;
                    border: 1px solid rgb(228, 228, 228) !important;
                    box-sizing: border-box;
                }
                ::v-deep .el-pager li:hover,::v-deep .btn-prev:hover,::v-deep .btn-next:hover,::v-deep  .el-pagination__sizes .el-input .el-input__inner:hover {
                    border-color: #0079fe;
                    color: #0079fe;
                }
                ::v-deep .el-input--mini .el-input__inner,::v-deep .el-input--mini .el-input__icon {
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .el-pagination .el-select .el-input {
                    width: 86px;
                    margin: 0 5px;
                }
                ::v-deep .el-pagination__jump{
                    height: 35px;
                    line-height: 35px;
                }
                ::v-deep .el-input__inner:focus {
                    border-color: rgb(228, 228, 228) !important;
                    outline: 0;
                }
            }
        }
    }
</style>